import { reqRecommendProductDetail } from "@/api/tourists";
import React, { memo, useEffect, useState } from "react";
import {
  Spin,
  Row,
  Col,
  DatePicker,
  Divider,
  Typography,
  Anchor,
  Menu,
  MenuProps,
  Button,
} from "antd";
import { useParams } from "react-router-dom";
import ProductInfo from "@/components/productInfo";
import { ProductDetailContainer } from "./style";
import ProductComment from "@/components/productComment";
import { commentMockData } from "./mock";
import { useSelector } from "@/store/hooks";
import { fetchProductDetailData } from "@/store/productDetail";
import { fetchAddShoppingCart } from "@/store/shoppingCart";
import { useDispatch } from "react-redux";
import { ShoppingCartOutlined } from "@ant-design/icons";
const { RangePicker } = DatePicker;
const ProductDetail = memo(() => {
  const dispatch = useDispatch();
  const { touristRouteId } = useParams();
  const { detailData, loading } = useSelector((state) => ({
    loading: state.productDetail.loading,
    detailData: state.productDetail.productDetailData,
  }));
  const shoppingCartLoading = useSelector(
    (state) => state.ShoppingCart.loading,
  );
  const items: MenuProps["items"] = [
    {
      key: 0,
      label: <Anchor.Link href="#feature" title="产品特色" />,
    },
    {
      key: 1,
      label: <Anchor.Link href="#fees" title="费用详情" />,
    },
    {
      key: 2,
      label: <Anchor.Link href="#notes" title="预定须知" />,
    },
    {
      key: 3,
      label: <Anchor.Link href="#comments" title="用户评论" />,
    },
  ];
  useEffect(() => {
    dispatch<any>(fetchProductDetailData(touristRouteId!));
  }, []);
  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: "auto",
          marginRight: "auto",
          width: "100%",
        }}
      />
    );
  } else {
    return (
      <ProductDetailContainer>
        <div className="page-content">
          <div className="product-intro-container">
            <Row>
              <Col span={13}>
                <ProductInfo
                  title={detailData.title}
                  shortDescription={detailData.shortDescription}
                  price={detailData.price}
                  coupons={detailData.coupons}
                  points={detailData.points}
                  discount={detailData.discount}
                  rating={detailData.rating}
                  pictures={detailData.touristRoutePictures.map((p) => p.url)}
                ></ProductInfo>
              </Col>
              <Col span={11}>
                <Button
                  style={{ marginTop: 58, marginBottom: 30, display: "block" }}
                  type="primary"
                  danger
                  // 和 header 里面的 购物车 button loading 状态连接在一起才不会一直转圈，为什么？
                  loading={shoppingCartLoading}
                  onClick={(e) => {
                    dispatch<any>(fetchAddShoppingCart(detailData.id));
                  }}
                >
                  <ShoppingCartOutlined />
                  添加商品
                </Button>
                <RangePicker
                  open
                  style={{
                    marginTop: "5rem",
                    position: "absolute",
                    top: "28px",
                    left: 0,
                  }}
                />
              </Col>
            </Row>
          </div>
          {/* 锚点菜单 */}
          <Anchor className="product-detail-anchor">
            <Anchor>
              <Menu items={items}></Menu>
            </Anchor>
          </Anchor>
          <div id="feature" className="product-detail-container">
            <Divider orientation="center">
              <Typography.Title level={3}>产品特色</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: detailData.features }}
              style={{ margin: "50px" }}
            ></div>
          </div>
          <div id="fees" className="product-detail-container">
            <Divider orientation="center">
              <Typography.Title level={3}>费用</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: detailData.fees }}
              style={{ margin: "50px" }}
            ></div>
          </div>
          <div id="notes" className="product-detail-container">
            <Divider orientation="center">
              <Typography.Title level={3}>预定须知</Typography.Title>
            </Divider>
            <div
              dangerouslySetInnerHTML={{ __html: detailData.notes }}
              style={{ margin: "50px" }}
            ></div>
          </div>
          <div id="comments" className="product-detail-container">
            <Divider orientation="center">
              <Typography.Title level={3}>用户评价</Typography.Title>
            </Divider>

            <div style={{ margin: "20px" }}>
              <ProductComment data={commentMockData}></ProductComment>
            </div>
          </div>
        </div>
      </ProductDetailContainer>
    );
  }
});

export default ProductDetail;
